<script setup lang="ts">
// import { getBannerList } from '~/api/home'
import { openNewWindowAsync } from '~/utils/helper'

const props = withDefaults(defineProps<Props>(), {})
const title = import.meta.env.VITE_APP_HEAD_TITLE
const bannerTypes = [1, 2] as const

interface Props {
  bannerType: {
    type: (typeof bannerTypes)[number]
    code?: number
  }
  width?: string | '100%'
  height?: string | '100%'
}

const router = useRouter()
const bannerUrlList = ref<any[]>([])

const getBannerBgImg = computed(() => {
  return {
    [bannerTypes[0]]: '/banner-1-defbg.png',
    [bannerTypes[1]]: '/banner-2-defbg.png'
  }[props.bannerType.type]
})

async function getBannerUrl() {
  try {
    const { data } = await getBannerList({ bannerType: props.bannerType.code })
    bannerUrlList.value = data
  } catch (error) {}
}

// await getBannerUrl()

function clickBannerEl(val: any) {
  if (val.isLink === 1 && val.linkTarget === 1) {
    openNewWindowAsync(({ openWin }) => openWin(val.targetUrl))
  }
  if (val.isLink === 1 && val.linkTarget === 3) {
    router.push(`/details/${getVideoType(val.videoTypeId) || 'movie'}/${val.targetUrl}`)
  }
}
</script>

<template>
  <Swiper
    :style="{ width, height }"
    :modules="[SwiperAutoplay, SwiperEffectCreative]"
    :slides-per-view="1"
    :loop="true"
    :pagination="true"
    effect="creative"
    :autoplay="{
      delay: 3000,
      disableOnInteraction: false
    }"
    :creative-effect="{
      prev: {
        shadow: false,
        translate: ['-100%', 0, -1]
      },
      next: {
        translate: ['100%', 0, 0]
      }
    }"
    rounded-2
  >
    <SwiperSlide v-for="slide in bannerUrlList" :key="slide" cursor-pointer @click="clickBannerEl(slide)">
      <ImgWrapper
        v-if="slide.pictureUrl"
        :src="slide.pictureUrl"
        :placeholder="getBannerBgImg"
        :alt="slide.alias || title"
      />
    </SwiperSlide>
  </Swiper>
</template>
